<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Music Info</title>
    <script src="../static/js/jquery-3.7.1.min.js"></script>
    <script src="../static/js/jquery.cookie.min.js"></script>
    <script src="../static/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css">
    <style>
        .card {
            background: #F1F3F5;
        }

        .card-header, .card-footer {
            text-align: center;
            background: #E1E3E5;
        }

        .card-body {
            white-space: nowrap;
        }
    </style>
</head>
<body style="background: #F1F3F5;">
<nav class="navbar navbar-expand-sm bg-dark justify-content-between">
    <a class="navbar-brand ms-2" onclick="window.location.href='./index.html'">Music Online</a>
    <form class="d-flex">
        <label><input class="form-control" type="text" placeholder="Search"></label>
        <button class="btn btn-primary ms-2" type="button">Search</button>
    </form>
    <div class="btn-group btn-group-sm me-3">
        <button type="button" id="log-in" class="btn btn-primary btn-dark"
                onclick="window.location.href='./login.html'">Log In
        </button>
        <button type="button" id="register" class="btn btn-primary btn-dark"
                onclick="window.location.href='./register.html'">Register
        </button>
        <img src="../static/img/avatar.jpg" id="avatar" style="width: 30px; height: 30px; display:none;"
             class="rounded-circle m-1" alt="avatar" onclick="window.location.href='userDetails.html'">
        <button type="button" id="userid" class="btn btn-primary btn-dark" style="display: none"
                onclick="window.location.href='userDetails.html'">USERID
        </button>
        <button type="button" id="log-out" class="btn btn-primary btn-dark" style="display: none">Log out</button>
    </div>
</nav>

<div id="music-info" class="container p-5">
    <div class="d-flex justify-content-center">
        <img src="../static/img/ad-trance.jpg" class="rounded-3" alt="music Cover">
        <div class="card">
            <div class="card-header"><h3></h3></div>
            <div class="card-body row">
                <p id="line1" class="col"></p>
                <p id="line2" class="col"></p>
            </div>
            <div class="card-footer"><h5></h5></div>
        </div>
    </div>
    <table class="table table-striped table-hover mt-3">
        <thead class="table-light">
        <tr>
            <th style="width: 20px;"></th>
            <th>Music name</th>
            <!--            <th>Music length</th>-->
            <th>Author</th>
            <th>Music Intro</th>
        </tr>
        </thead>
        <tbody id="table-body"></tbody>
    </table>
</div>

<script>
    let server = "http://localhost:8010";

    let url = window.location.href;
    param = url.slice(url.indexOf('?') + 1);
    vinylID = param.split('=')[1];

    let token = $.cookie('token');

    if (token !== undefined) {
        $.ajax({
            type: "GET",
            dataType: "json",
            url: server + "/user/userInfo",
            headers: {
                'Authorization': token,
            },
            success: function (userData) {
                if (userData != null) {
                    $("#log-in").hide();
                    $("#register").hide();
                    $(".navbar img").attr("src", userData.data.avatarUrl).show();
                    $("#userid").html(userData.data.nickName).show();
                    $("#log-out").show();
                }
            },
            error: function () {
                console.log("something wrong.")
            }
        })
    }

    $("#log-out").click(function () {
        $.removeCookie('token');
        console.log("User log out.");
        alert("You have been log out.");
        location.href = "./index.html";
    })

    $.ajax({
        type: "POST",
        dataType: "json",
        url: server + "/music/info",
        data: {
            'vinylId': vinylID,
        },
        headers: {
            'Authorization': token,
        },
        success: function (result) {
            if (result.code === 200) {
                $("#music-info h3").html(result.data.musicName);
                let line1 = "Author: " + result.data.musicAuthor;
                line1 += "<br>Date: " + result.data.issuingDate;
                $("#line1").html(line1);
                $("#line2").html("Upload time: " + result.data.updateDate);
                $("#music-info h5").html("Price: ￥" + result.data.musicPrice);
                let body = "<tr><td></td><td>";
                body += result.data.musicName;
                body += "</td><td>";
                body += result.data.musicAuthor;
                body += "</td><td>";
                body += result.data.musicIntro;
                body += "</td>";
                $("#table-body").append(body);
            }
        },
        error: function () {
            console.log("music not existed");
            alert("Music is not existed");
        }
    })

</script>
</body>
</html>